<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML_task01_rank</title>
  </head>
  <body>
    <link rel="stylesheet" href="style/CSS_task01_rank.css" />
    <link rel="stylesheet" href="style/icon.css" />
    <div class="page">
      <header class="top">
        <div class="top-title">排行榜</div>
        <nav class="tabs">
          <ul>
            <li class="tab-item tab-active">
              <img src="imgs/icon_hot.webp" class="icon" />热门资讯
            </li>
            <li class="tab-item">
              <img src="imgs/icon_article.webp" class="icon" />好文精选
            </li>
          </ul>
        </nav>
        <nav class="cats">
          <ul class="cat-list">
            <li class="cat-item cat-active">资讯推送</li>
          </ul>
        </nav>
      </header>
      <main class="list">
        <a href="#" class="sku">
          <div class="content">
            <div class="cover">
              <img src="imgs/iphone17.png" class="cover-img" />
              <img src="imgs/rank-top1.png" class="cover-rank" />
            </div>
          </div>
          <div class="info">
            <div class="sku-title">
              2025苹果秋季新品, iPhone17标准版首配120Hz, 性价比史上最强!
            </div>
            <div class="desc">
              <img src="imgs/icon_topic.png" class="icon-small" />
              <span class="source">数码科技</span>
              <i class="iconfont icon-heart-full"></i>
              <span class="desc-number">2078&nbsp;&nbsp;&nbsp;</span>
              <i class="iconfont icon-comment"></i>
              <span class="desc-number">93</span>
            </div>
          </div>
        </a>

        <a href="#" class="sku">
          <div class="content">
            <div class="cover">
              <img src="imgs/xiaomi.jpg" class="cover-img" />
              <img src="imgs/rank-top2.png" class="cover-rank" />
            </div>
          </div>
          <div class="info">
            <div class="sku-title">
              小米紧急召回30%的SU7: 新国标几乎1 : 1复刻了“小米爆燃事故”现场
            </div>
            <div class="desc">
              <img src="imgs/icon_topic.png" class="icon-small" />
              <span class="source">汽车</span>
              <i class="iconfont icon-heart-full"></i>
              <span class="desc-number">1458&nbsp;&nbsp;&nbsp;</span>
              <i class="iconfont icon-comment"></i>
              <span class="desc-number">164</span>
            </div>
          </div>
        </a>

        <a href="#" class="sku">
          <div class="content">
            <div class="cover">
              <img src="imgs/731.jpg" class="cover-img" />
              <img src="imgs/rank-top3.png" class="cover-rank" />
            </div>
          </div>
          <div class="info">
            <div class="sku-title">
              破2亿, 创多项纪录!《731》首波影评来了! 有观众说结局“没想到”……
            </div>
            <div class="desc">
              <img src="imgs/icon_topic.png" class="icon-small" />
              <span class="source">电影</span>
              <i class="iconfont icon-heart-full"></i>
              <span class="desc-number">1201&nbsp;&nbsp;&nbsp;</span>
              <i class="iconfont icon-comment"></i>
              <span class="desc-number">304</span>
            </div>
          </div>
        </a>

        <a href="#" class="sku">
          <div class="content">
            <div class="cover">
              <img src="imgs/bolan.jpg" class="cover-img" />
              <img src="imgs/rank-top4.png" class="cover-rank" />
            </div>
          </div>
          <div class="info">
            <div class="sku-title">
              北约、俄陈兵边境对峙，一架中国专机突访波兰，美国要有大动作
            </div>
            <div class="desc">
              <img src="imgs/icon_topic.png" class="icon-small" />
              <span class="source">军事</span>
              <i class="iconfont icon-heart-full"></i>
              <span class="desc-number">401&nbsp;&nbsp;&nbsp;</span>
              <i class="iconfont icon-comment"></i>
              <span class="desc-number">39</span>
            </div>
          </div>
        </a>

        <a href="#" class="sku">
          <div class="content">
            <div class="cover">
              <img src="imgs/f1.jpg" class="cover-img" />
              <img src="imgs/rank-top5.png" class="cover-rank" />
            </div>
          </div>
          <div class="info">
            <div class="sku-title">
              新加坡F1大奖赛即将开跑, 这里是全球唯一的夜间赛道!
            </div>
            <div class="desc">
              <img src="imgs/icon_topic.png" class="icon-small" />
              <span class="source">体育赛事</span>
              <i class="iconfont icon-heart-full"></i>
              <span class="desc-number">366&nbsp;&nbsp;&nbsp;</span>
              <i class="iconfont icon-comment"></i>
              <span class="desc-number">81</span>
            </div>
          </div>
        </a>

        <a href="#" class="sku">
          <div class="content">
            <div class="cover">
              <img src="imgs/shanghai.jpg" class="cover-img" />
            </div>
          </div>
          <div class="info">
            <div class="sku-title">上海优化调整个人住房房产税试点政策</div>
            <div class="desc">
              <img src="imgs/icon_topic.png" class="icon-small" />
              <span class="source">时政</span>
              <i class="iconfont icon-heart-full"></i>
              <span class="desc-number">1107&nbsp;&nbsp;&nbsp;</span>
              <i class="iconfont icon-comment"></i>
              <span class="desc-number">59</span>
            </div>
          </div>
        </a>
      </main>
    </div>
  </body>
</html>
